<template>
  <section style="height: 100%;background: #fff;">
    <img src="../../assets/carlist/carResult.png" class="banner">
    <div style="box-shadow: 0px 5px 10px rgba(194,194,194,.2);">
      <yd-cell-item>
        <span slot="left">车架号</span>
        <yd-input slot="right" v-model="input"  required :show-required-icon="false" :show-success-icon="false" :show-error-icon="false"  placeholder="请输入车架号" style="margin-left: 0.38rem;
"></yd-input>
      </yd-cell-item>
    </div>
    <div  class="footer_pos">
      <div class="foot_left">
        <span>需付金额：</span><span style="color: red;font-weight: bold; ">￥{{price}}</span>
      </div>
      <div class="foot_right" @click="show2()">
        立即验证
      </div>
    </div>
    <payPart :show-wrap="iswrap" :need-param="param" :product-title="title" :product-price="price" :api-logo="apilogo"></payPart>
  </section>
</template>

<script>
  import payPart from '@/components/api/pay_part';
  export default {
    name:'carChoose',
    data() {
      return {
        input:'',
        iswrap:false,
        param:{},
        title:'车辆选配信息查询',
        price:'',
        apilogo:'',
      }
    },
    methods:{
      show2(){
        const that = this;

        if(this.input == ''){
          this.$dialog.notify({
            mes: '请输入车架号',
            timeout: 1500,
          });
          return;
        }
        let redirectUrl = this.$route.path;
        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response)=>{
            if(response.data.code != 200){
              this.$dialog.notify({
                mes: '您还未登录，将为您跳转到登录页面',
                timeout: 3000,
                callback: () => {
                  let obj = {};
                  obj.carvin=that.input;
                  obj.url = redirectUrl;
                  sessionStorage.setItem('redirectUrl',JSON.stringify(obj));
                  that.$router.push('/login');
                }
              });
            }else{
              that.param.carvin=that.input;
              that.param.pid = '37';
              that.iswrap = !that.iswrap;
            }
          }).catch(()=>{
        })


      },
    },
    components:{
      payPart
    },
    created(){
      let that = this;
      let redirectUrl = JSON.parse(sessionStorage.getItem('redirectUrl'));
      if(redirectUrl != null){
        this.input = redirectUrl.carvin;
        sessionStorage.removeItem('redirectUrl');
      }
      this.$ajax.post(window.g.apiUrl+'/alipay/getProduct.do',JSON.stringify({
        type:'B',
      })).then((response)=>{
        if(response.data.code == 200){
          let arr = response.data.data;
          for(var i = 0;i<arr.length;i++){
            if(arr[i].id == '37'){
              that.price = arr[i].price;
              that.apilogo = arr[i].iconurl;
            }
          }
        }else{
          that.$dialog.notify({
            mes: '信息获取超时，请稍后重试',
            timeout: 1500,
          });
        }


      }).catch(()=>{
      })
    },
    beforeRouteEnter(to,from,next){
      if(from.path != '/loginback'){
        sessionStorage.removeItem('redirectUrl');
      }
      next();
    }

  }
</script>

<style scoped>
  .banner{
    width: 100%;
    display: block;
  }
  .footer_pos{
    width: 100%;
    height: 1rem;
    background: #F5F5F5;
    position: fixed;
    bottom: 0;
    display: flex;
  }
  .foot_left{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
  }
  .foot_right{
    width: 2.5rem;
    height: 1rem;
    background: #E72A26;
    color: #fff;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pay_logo{
    width: 0.5rem;
    height: 0.5rem;
  }
  .pay_content{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 1rem;
    padding: 0 .24rem;
  }
  .pay_title{
    height: 1rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .pay_center{
    display: flex;
    align-items: center;
    margin-top: .5rem;
    justify-content: center;
  }
  .pay_img{
    width: .4rem;
    height: .4rem;
  }
  .pay_count{
    margin-top: .44rem;
    padding-bottom: .86rem;
    border-bottom: 1px solid #f2f2f2;
    font-weight: bold;
    font-size: .5rem;
  }
  .pay_way{
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f2;
  }
  .pay_way div{
    display: flex;
    align-items: center;
  }
  .pay_btn{
    width: 100%;
    height: 1rem;
    position: absolute;
    bottom: 0;
    background: #E72A26;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>
